<script lang="ts" setup>
import TimePosition from "../Common/TimePosition.vue";
import ClipWrapper from "./ClipWrapper.vue";
import { useStoryboard } from '@/composables/storyboard';
import { timeline } from '@/instance';
import { onMounted } from 'vue';

const sequence = {
  tracks: [
    {
      id: 0,
      name: "1",
      children: [
        {
          id: '1',
          duration: 5,
          offset: 0,
          name: "AAAAA",
          ref: {
            id: '1',
            url: 'http://172.16.0.205:86/buckets/u-q3p523b4mem82k63/2022/04/26/phw6g3i7xkxh5g1v/b3be6d56be874372b063ad7fd9070090.mp4',
            length: 5,
            in: 0,
            out: 5,
          },
          src: 'http://172.16.0.205:86/buckets/u-q3p523b4mem82k63/2022/04/26/phw6g3i7xkxh5g1v/b3be6d56be874372b063ad7fd9070090.mp4',
          thumbnail: 'http://172.16.0.205:86/buckets/u-q3p523b4mem82k63/2022/04/26/phw6g3i7xkxh5g1v/82920a7e1f3047bf933c336e872f5267.jpg'
        },
        {
          id: '2',
          duration: 10,
          offset: 5,
          name: "BBBBB",
          ref: {
            id: '2',
            url: 'http://172.16.0.205:86/buckets/u-02rsh6ok96f7up6j/2021/10/12/xfek03gyo3zrdfso/b2a01bd9cd124488bda10363bef99cf4.mp4',
            length: 10,
            in: 0,
            out: 10,
          },
          src: 'http://172.16.0.205:86/buckets/u-02rsh6ok96f7up6j/2021/10/12/xfek03gyo3zrdfso/b2a01bd9cd124488bda10363bef99cf4.mp4',
          thumbnail: 'http://172.16.0.205:86/buckets/u-02rsh6ok96f7up6j/keyframes/biz_sobey_video/2021/10/12/e61acb24b0734050a26cb15cab9125b0_videogroup_220_124_0.jpg'
        },
        {
          id: '3',
          duration: 15,
          offset: 15,
          name: "CCCC",
          ref: {
            id: '3',
            url: 'http://172.16.0.205:86/buckets/u-02rsh6ok96f7up6j/20220104/2022-01-04/b025-%E5%9B%A0%E4%B8%BA%E6%9C%89%E4%BD%A0-%E6%9C%97%E8%AF%B5%E7%89%88-%E6%96%B01_8e3183a572dd4d89b3f864ef29f0a500_low_video.mp4',
            length: 15,
            in: 0,
            out: 15,
          },
          src: 'http://172.16.0.205:86/buckets/u-02rsh6ok96f7up6j/20220104/2022-01-04/b025-%E5%9B%A0%E4%B8%BA%E6%9C%89%E4%BD%A0-%E6%9C%97%E8%AF%B5%E7%89%88-%E6%96%B01_8e3183a572dd4d89b3f864ef29f0a500_low_video.mp4',
          thumbnail: 'http://172.16.0.205:86/buckets/u-02rsh6ok96f7up6j/keyframes/biz_sobey_video/2022/01/04/52bd419e2f784992adb9ddc6e4044d93_videogroup_220_124_0.jpg'
        },
      ],
    },
    {
      id: 1,
      name: "2",
      children: [
        // {
        //   duration: 10,
        //   offset: 10,
        //   src: '',
        //   name: 'Aerial view of young girl stand up paddling on vacation',
        //   thumbnail: 'https://d2brbhkbhcdcr1.cloudfront.net/1170580333/480x272.jpg?cb=20180611160240'
        // } as Clip,
      ],
    },
  ],
};
onMounted(()=>{
  timeline.load(sequence);
})

const {
  dragging,
  draggingOverIndex,
  addMark,
  handleSplitClick,
  storyboard,
  displayCurrentTime,
  currentTimeLeft,
  marginLeftClassName,
  draggerHandler,
  handleSliderMouseDown
} = useStoryboard()

</script>
<template>
  <div class="sb-wrapper">
    <div class="toolbar">audio vo </div>
    <div class="content">
      <div
        class="tracks-container"
        v-drop="{ prefix: 'clip', data: null }"
        v-drag="{ prefix: 'un-handle', data: null, draggable: 'false' }">
        <div ref="slider" class="sb-playhead-cnt" @mousedown="handleSliderMouseDown"
          :style="{ width: storyboard.clips.length * 240 + 35 + 'px' }"></div>
        <ClipWrapper
          v-drag="{ prefix: 'clip', data: clip }"
          v-ui-state="{ prefix: 'clip', data: clip }"
          class="clip-item"
          :class="{ [marginLeftClassName]: dragging && draggingOverIndex <= index }"
          v-for="(clip, index) in storyboard.clips"
          :clip="clip"
          :key="clip.thumbnail"
          :style="{ zIndex: clip.operating ? 2 : 1, transitionProperty: clip.operating ? 'margin-left' : 'all' }"
          :default-style="{ left: (index * 240 + 35), width: 240 }"></ClipWrapper>
        <div
          v-drag="{ prefix: 'placeholder', data: null, draggable: 'false' }"
          class="clip-placeholder flex-column flex-all-center"
          :class="{ [marginLeftClassName]: dragging }"
          :style="{ left: storyboard.clips.length * 240 + 35 + 'px' }">
          <p>Drop videos or images here</p>
        </div>
        <TimePosition
          v-dragger="draggerHandler"
          :text="displayCurrentTime"
          :style="{ left: currentTimeLeft, height: '180px' }">
          <div class="mark-btn pointer" title="Add marker" @click="addMark">
            <i class="ri-map-pin-add-fill"></i>
          </div>
          <div
            class="split-btn pointer"
            title="Split selected clip at playhead (S)"
            @click="handleSplitClick">
            <i class="ri-scissors-line"></i>
          </div>
        </TimePosition>
      </div>
    </div>
  </div>
</template>
<style lang="stylus">
.sb-wrapper
  width 100%
  height 240px
  background-color #3d3d3d
  border-top 1px solid #2b2b2b
  overflow: hidden;
.toolbar
  position: relative;
  width: 80px;
  height: 100%;
  float: left;
  background-color: #2b2b2b;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  color #fff
.content
  height: 100%;
  margin-left 80px
.tracks-container
  height: 100%;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  padding-top: 5px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  .sb-playhead-cnt
    position: absolute;
    height: 42px;
    width: 1334px;
    background: red;
  .sb-list
    position: absolute;
    top: 63px;
    bottom: 0;
    white-space: nowrap;
    padding-left: 35px;
.clip-item
  position: absolute;
  display: inline-block;
  width: 240px;
  top: 63px;
  // min-width: 40px;
  height: 136px;
  transition: all .15s;
  cursor: move;
  overflow: hidden;
.clip-placeholder
  position: absolute;
  width: 240px;
  height: 120px;
  top: 72px;
  display: inline-block;
  cursor: default;
  border: 1px dashed #666;
  border-radius: 3px;
  background-color: #494949;
  transition: margin-left .15s;
  margin-right: 35px;
  p
  color #777
.makespace-70
  margin-left 70px
.makespace-240
  margin-left 240px
</style>
